<template>
    <div class="content">
        <router-link to="/app/commentManager"><el-button  icon="information">待审核列表</el-button></router-link>
        <router-link to="/app/passComment"><el-button  icon="circle-check">已通过审核列表</el-button></router-link>
        <router-link to="/app/unpassComment"><el-button  icon="circle-close">未通过审核列表</el-button></router-link>
        <div class="allComment">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="auditId"
                        label="审核ID"
                        width="130px">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="130px">
                </el-table-column>
                <el-table-column
                        prop="bookName"
                        label="评论的小说"
                        width="200px">
                </el-table-column>
                <el-table-column
                        prop="comment"
                        label="评论"
                        width="300px"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="commentTime"
                        label="评论时间"
                        width="150px">
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="13"
                    layout="prev, pager, next"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {Message} from 'element-ui';
    export default{
        data:function () {
            return {
                tableData: [],
                count:''
            }
        },
        methods:{
            //当前页发生改变时触发的事件
            handleCurrentChange(val) {
                this.$http.get(`http://localhost/api/getPassComment/${val}`).then(function (result) {
                    if(`${val}` ==1){
                        this.tableData = result.body.slice(0,13);
                    }
                    else{
                        this.tableData = result.body;
                    }
//                    this.tableData = result.body;
                })
            },
            //获取所有的通过的评论信息
            getComment:function () {
                this.$http.get('http://localhost/api/getPassComment/1').then(function (result) {
                    this.tableData = result.body.slice(0,13);
                    this.count = result.body.length;
                });
            }
        },
        created:function () {
            this.getComment();
        }
    }
</script>
<style scoped>
    .content{
        padding:20px 40px 0 20px;
    }
    .allComment{
        height: 600px;
        margin-bottom: 10px;;
    }
</style>